<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/searchPage/common.css">
    <link rel="stylesheet" href="/static/searchPage/get-task.css">
    <script src="/static/searchPage/jquery.min.js"></script>
    <title>搜索结果</title>
    <style type="text/css">
        .content-box .item .icon img {
            width: 80px;
            height: 80px;
            border-radius: 6px;
        }
        a{
            text-decoration: none;
        }

        .content-box .item {

            width: 100%;
            display: flex;
            padding-bottom: 5px;
            border-bottom: 4px solid #f3f3f3;
        }
        .numDetail >span{
            width: 32%;
            text-align: left;
            display: inline-block;
        }
        .location{
            margin-left: 13%;
            border: solid 1px #c2cdd7;
            color: white;
            background: #80d0d9;
        }
        .infoText{
            width: 100%;
            display: inline;
            font-size: 12px;
            font-weight: 900;
        }
    </style>
</head>
<body>
<div class="header" id="he">
    <div onclick="javascript:history.go(-1);">
        <img src="/static/searchPage/images/top-icon-left.png" alt="">
    </div>
    <div class="header-title"><p>搜索结果</p></div>
</div>
<hr style="height:5px; background:#f2f3f9; border:0;">

<div class="content-box">
    <span class="react"></span>
    <span class="title">信息列表(Information List)</span>
    <p class="search-info">共搜索出<span class="info-stress" id="dataNum">{$count}</span>条信息，数据<span class="info-stress" >{$web_search_time}</span>
    分钟内有效</p>
    <div id="content">
<!--        <div class="item" name="item" data="1">-->
<!--            <div class="detail">-->
<!--                <h6 class="name">浙江大学(一流大学建设高校)-&#45;&#45;00001</h6>-->
<!--                <p class="bus-name">科技与创意设计试验班-&#45;&#45;011</p>-->
<!--                <p class="bus-name"></p>-->
<!--                <div class="info">-->
<!--                    <button class="doctor">2019年度</button>-->
<!--                    <button class="hometown">浙江</button>-->
<!--                </div>-->
<!--                <p class="salary numDetail">-->
<!--                    <span>分数线：666</span>-->
<!--                    <span>计划数：30</span>-->
<!--                    <span>位次数：40</span>-->
<!--                </p>-->
<!--            </div>-->
<!--        </div>-->
    </div>
    <p class="more" id="more" style="display: none">点击查看更多...</p>
    <p class="more" id="noMore" style="display: none">无更多信息...</p>
    <input type="hidden" id="page" value="1">
    <input type="hidden" id="limit" value="{$limit}">
</div>
</body>
<script type="text/javascript">
    //初始化 显示按钮信息
    $(function(){
        //获取数据,手动触发
        $("#more").click();
    })

    //查看更多按钮点击事件
    $("#more").click(function(){
        let page=$("#page").val();
        let limit=$("#limit").val();
        //发送请求
        $.ajax({
            url:"{:url('search/Index/search')}?slo_wechat_code={$slo_wechat_code}",
            type:"post",
            dataType:"json",
            data:{
                page:page,
                limit:limit
            },
            success:function(res){
                if(res.code==1){
                    addData(res);
                }else{
                    Toast(res.msg);
                    window.location.href="{:url('search/Index/index')}";
                    return false;
                }
            }
        })
    })

    //将列表数据追加到页面上
    function addData(res){

        let taskList=res.data;
        let page=res.page;
        let num=res.count;
        let limit=res.limit;
        let currentNum=res.currentNum;
        let html="";
        taskList.forEach(function(item){
            let tmpHtml= ' <div class="item" name="item" >\n' +
                '            <div class="detail">\n' +
                '                <h6 class="name">'+item['ain_school_name']+'---'+item['ain_school_code']+'</h6>\n' +
                '                <p class="bus-name">'+item['ain_profession_name']+'---'+item['ain_profession_code']+'</p>\n' +
                '                <p class="bus-name"></p>\n' +
                '                <div class="info">\n' +
                '                    <button class="doctor">'+item['bind_year']['attr_name']+'年度</button>\n' +
                '                    <button class="location">'+item['bind_location']['attr_name']+'</button>\n' +
                '                </div>\n' +
                '                <p class="salary numDetail">\n' +
                '                    <span><span class="infoText">分数线：</span>'+item['ain_grade']+'</span>\n' +
                '                    <span><span class="infoText">计划数：</span>'+item['ain_plan_num']+'</span>\n' +
                '                    <span><span class="infoText">位次数：</span>'+item['ain_position']+'</span>\n' +
                '                </p>\n' +
                '            </div>\n' +
                '        </div>';
            html+=tmpHtml;
        })
        //将拼接好的html代码加入到文档中取
        $("#content").append(html);

        if(currentNum<limit){
            showNoMore();
        }else{
            showMore()
        }
        //修改页面上保存的page值
        $("#page").val(page+1);
    }


    function showMore(){
        $("#more").css("display","block");
        $("#noMore").css("display","none");
    }

    function showNoMore(){
        $("#more").css("display","none");
        $("#noMore").css("display","block");
    }


</script>

</html>